<!-- 回到顶部的按钮 -->
<template>
	<view class="back-top-box" 
	:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-safe-bottom': mOption.safearea}]"
	:style="{'z-index':mOption.zIndex, 'left': left, 'right': right, 'bottom':addUnit(mOption.bottom)}"
	@click="toTopClick">
		<view class="content" v-if="!isShow">
			<view class="text-num num-top">
				<text>{{mOption.showNum}}</text>
			</view>
			<view class="line"></view>
			<view class="text-num num-bottom">
				<text>{{totalResult}}</text>
			</view>
		</view>
		<view class="content" v-else>
			<view class="back-top-img">
				<!-- <image src="../../../static/img/back_top.png" mode="" class="backTopImg"></image> -->
			</view>
			<view class="text-back-top">
				<text>顶部</text>
			</view>
		</view>
		<!-- <image
			v-if="mOption.src"
			class="mescroll-totop"
			:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-safe-bottom': mOption.safearea}]"
			:style="{'z-index':mOption.zIndex, 'left': left, 'right': right, 'bottom':addUnit(mOption.bottom), 'width':addUnit(mOption.width), 'border-radius':addUnit(mOption.radius)}"
			:src="mOption.src"
			mode="widthFix"
			@click="toTopClick"
		/> -->
	</view>
</template>

<script>
export default {
	props: {
		// up.toTop的配置项
		option: Object,
		total:[String, Number],
		// 是否显示
		value: false
	},
	computed: {
		// 支付宝小程序需写成计算属性,prop定义default仍报错
		mOption(){
			// console.log(this.option)
			return this.option || {}
		},
		totalResult(){
			return this.total || 0
		},
		// 优先显示左边
		left(){
			return this.mOption.left ? this.addUnit(this.mOption.left) : 'auto';
		},
		// 右边距离 (优先显示左边)
		right() {
			return this.mOption.left ? 'auto' : this.addUnit(this.mOption.right);
		},
		isShow(){
			return this.option.show
		}
	},
	methods: {
		addUnit(num){
			if(!num) return 0;
			if(typeof num === 'number') return num + 'rpx';
			return num
		},
		toTopClick() {
			this.$emit('input', false); // 使v-model生效
			this.$emit('click'); // 派发点击事件
		}
	}
};
</script>

<style>
/* 回到顶部的按钮 */
.mescroll-totop {
	z-index: 9990;
	position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
	right: 20rpx;
	bottom: 120rpx;
	width: 72rpx;
	height: auto;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.5s; /* 过渡 */
	margin-bottom: var(--window-bottom); /* css变量 */
}

 /* 适配 iPhoneX */
.mescroll-safe-bottom{
	margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
	margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
}

/* 显示 -- 淡入 */
.mescroll-totop-in {
	opacity: 1;
}

/* 隐藏 -- 淡出且不接收事件*/
.mescroll-totop-out {
	opacity: 0;
	pointer-events: none;
}
</style>
<style lang="scss" scoped>
.back-top-box{
	width: 80rpx;
	height: 80rpx;
	border:1px solid #999999;
	background-color: #fff;
	position: fixed;
	right: 30rpx;
	bottom:130rpx;
	border-radius: 50%;
	.content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction:column;
		.text-num{
			height: 40rpx;
			font-size: 20rpx;
			text-align: center;
		}
		.num-top{
			display: flex;
			justify-content: center;
			align-items: flex-end;
			height: 39rpx;
			// margin-top: 14rpx;
		}
		.line{
			width: 90%;
			height: 1px;
			background-color: #333;
			margin:0 auto;
		}
		.back-top-img{
			width: 35rpx;
			height: 35rpx;
			margin:12rpx auto 0;
			.backTopImg{
				width: 100%;
				height: 100%;
			}
		}
		.text-back-top{
			font-size: 20rpx;
			text-align: center;
		}
	}
}	
</style>